<template>
  <div>
    <Table
      class="home-table charts-border"
      :columns="colData"
      :data="showTableData"
      :width="585"
      :height="830"
      :max-height="830"
      :highheight-row="highheightRow"
      @on-row-dblclick="showPicture"
    ></Table>
    <Modal
      v-model="isShowModal"
      
      title=""
      width="1080"
      class-name="vertical-center-modal"
      
    >  
    <p slot="header" style="height:30px;line-height:30px;font-size:24px;">
        <span>{{ eventPictureMsg.road_name}}&nbsp;-&nbsp;{{eventPictureMsg.event}}&nbsp;-&nbsp;{{eventPictureMsg.starttime}}</span>
    </p>
      <div style="height: 100%;">
        <!-- <img v-if="showImgVideo" :src="eventDetailData.http_url_image" width="100%" height="100%"/>
        <Mp4VideoPlayer v-else :src="eventDetailData.http_url_video"></Mp4VideoPlayer> -->
        <img  style="border:15px solid rgba(0,90,181,0.5)" v-if="showImgVideo" :src="eventPictureMsg.p_path" width="100%" height="100%"/>
        <Mp4VideoPlayer v-else :src="eventPictureMsg.v_path"></Mp4VideoPlayer>
      </div>
      <div slot="footer" >
        <Button type="success" size="large" @click="showEventPicture(true)">显示图片</Button>
        <Button v-if="eventPictureMsg.v_path!=='' && eventPictureMsg.v_path!=='null'" type="warning" size="large" @click="showEventPicture(false)">播放视频</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {reqEvent} from '@/api'
import Mp4VideoPlayer from "@/components/myvideo/Mp4VideoPlayer"
import {mapState} from 'vuex'
var node_schedule = require("node-schedule");
export default {
  components:{
    Mp4VideoPlayer
  },
  data() {
    return {
      height: 400,
      highheightRow: true,
      isShowModal:false,
      eventDetailData: {},
      colData: [
        { title: "报警时间", key: "starttime", width: "210", align: "center" },
        { title: "报警地点", key: "road_name", width: "auto", align: "center" },
        { title: "报警类型", key: "event", width: "auto", align: "center" },
        {
          title: "事件详情",
          key: "detail",
          width: "150",
          align: "center",
          render: (h, params) => {
            // console.log('params:',params )
            return h("Button",
              {
                props: {
                  type: params.row.video_path === '' || params.row.video_path === 'null' ? "warning":"success",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    console.log('params:',params)
                    this.eventPictureMsg = params.row
                    this.isShowModal = true
                    this.showImgVideo = true
                  }
                }
              },
              "查看详情",
            );
          }
        }
      ],
      allMonitorEventList:[],
      eventPictureMsg:{},
      showImgVideo:true
    };
  },
  mounted(){
    this.getEventTable()
    var intervalEventTabel = node_schedule.scheduleJob("*/10 * * * * *",() => {
        console.log("实时监控页面事件列表实时获取 -------------> 报警事件数据!")
        this.getEventTable()
      }
    )
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      console.log("取消 实时监控页面事件列表实时获取 -------------> 报警事件数据");
      intervalEventTabel.cancel();
    })
  },
  computed: {
    ...mapState(['monitorData']),
    showTableData() {
      // let eventTable = []
      // this.allMonitorEventList.forEach(item =>{
      //   eventTable.push({
      //     "time":item.starttime,
      //     "road_name":item.road_name,
      //     "event":item.event
      //   })
      // });
      return this.allMonitorEventList.map(ele => {
        let cellClassName = ''
        if(ele.event === '停车'){
          cellClassName = "demo-table-info-cell-stop"
        }else if(ele.event === '行人入侵'){
          cellClassName = "demo-table-info-cell-person"
        }else if(ele.event === '车辆慢行'){
          cellClassName = "demo-table-info-cell-slow"
        }else if(ele.event === '交通拥堵'){
          cellClassName = "demo-table-info-cell-jam"
        }else if(ele.event === '逆行'){
          cellClassName = "demo-table-info-cell-back"
        }else if(ele.event === '危化车辆'){
          cellClassName = "demo-table-info-cell-danger"
        }

        ele.cellClassName = {
          road_name: cellClassName,
          //datetime: cellClassName,
          event: cellClassName,
          //: cellClassName
        }
        return ele
      });
      //return eventTable;
    }
  },
  
  methods: {
    async getEventTable(){
      let start_time = dayjs().startOf("day").format('YYYY-MM-DD HH:mm:ss');
      //let road_name = this.monitorData.videoMsg.ch_name
      let params={
        start_time,

        page_index:1,
        page_size:50
      }
      let resData = await reqEvent(params)
      if(resData.code === 6000) {
        this.allMonitorEventList = resData.data.events
        //console.log("allMonitorEventList:"+this.allMonitorEventList)
      }
    },
    showPicture(row,index){
      this.eventPictureMsg = this.allMonitorEventList[index]
      this.isShowModal = true
      this.showImgVideo = true
    },
    showEventPicture(value){
      this.showImgVideo = value
    }
    
  }
};
</script>

<style lang="less">
@table-background-color: #0a4271 !important;

.home-table {
  opacity: 0.8;
}
.home-table .ivu-table {
  color: #fff;
  font-size: 16px;
  background-color: #01237c !important;
  overflow-x: hidden;
  overflow-y: hidden;
}
// 表格字体
.home-table .ivu-table td {
  font-size: 16px ;
  font-weight: bold;
}
// 表格头的字体
.home-table .ivu-table th {
  background-color: @table-background-color;
  font-size: 18px;
  font-weight: bold;
  height: 42px;
}
.home-table .ivu-table-wrapper {
  border: 1px solid @table-background-color;
}
.home-table .ivu-table:after {
  background-color: @table-background-color;
}
.home-table .ivu-table td,.ivu-table th {
  border-bottom: 1px solid @table-background-color;
}
// 停车
.home-table .ivu-table .demo-table-info-cell-stop {
  color: #faad14;
  font-weight: bold;
}
// 行人入侵
.events-table .ivu-table .demo-table-info-cell-person {
  color: #fff566;
  font-weight: bold;
}
// 车辆慢行
.home-table .ivu-table .demo-table-info-cell-slow {
  color: #5fb4ec;
  font-weight: bold;
}
// 车辆拥堵
.home-table .ivu-table .demo-table-info-cell-jam {
  color: #e9744d;
  font-weight: bold;
}
// 逆行
.home-table .ivu-table .demo-table-info-cell-back {
  color:#BB5E00;
  font-weight: bold;
}
// 危化车辆
.home-table .ivu-table .demo-table-info-cell-danger {
  color: #64A600	;
  font-weight: bold;
}
.home-table .ivu-table-row-hover td {
  color:#fff;
  background-color: #104ba3 !important;
  // background-color: #36cfc9 !important;
}
.home-table .ivu-table-row-highlight td {
  background-color: #40a9ff !important;
  // background-color: #36cfc9 !important;
}
// .home-table .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td{
//   background-color: #3A5683;
// }
.table-detail-xxx .ivu-icon-ios-close {
  font-size: 41px !important;
}
.table-detail-xxx .ivu-modal-body {
  padding: 2px 10px;
}



@table-background-color: #0a4271 !important;

.ivu-table {
  color: #fff !important;
  overflow-x: hidden !important;
  background-color: #01237c !important;
  overflow-y: hidden !important;
}
.ivu-table .demo-table-info-row td {
  font-size: 16px;
}
.ivu-table th {
  background-color: @table-background-color;
  font-size: 16px;
}
.ivu-table .demo-table-error-row td {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table td.demo-table-info-column {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-name {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-age {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table .demo-table-info-cell-address {
  background-color: #187;
  color: #fff;
}
.ivu-table-wrapper {
  border: 1px solid @table-background-color;
}
.ivu-table:after {
  background-color: @table-background-color;
}
.ivu-table td,
.ivu-table th {
  border-bottom: 1px solid @table-background-color;
}
.ivu-table .demo-table-info-row-legal {
  color: #18b566;
}
.ivu-table .demo-table-info-row-illegal {
  color: #f29100;
}
.ivu-table .demo-table-info-cell-legal {
  color: #18b566;
  font-weight: bold !important;
}
.ivu-table .demo-table-info-cell-illegal {
  color: #f29100;
  font-weight: bold !important;
}
.ivu-page-next,
.ivu-page-prev {
  background-color: #01237c !important;
}
.ivu-page-item {
  background-color: #1081b2 !important;
  color: red !important;
}
.ivu-page-item a {
  color: white !important;
}
.ivu-page-item-active a {
  color: blue !important;
}
.ivu-page-options-elevator input {
  background-color: #1081b2 !important;
  color: #fff !important;
}
.ivu-table td {
  background-color: #01237c !important;
}
.ivu-table-overflowX {
  overflow-x: hidden !important;
}
.ivu-table-tip table td {
  font-size: 16px;
}
.ivu-table-tip {
  overflow: hidden !important;
}



@background-color: #0a4271 !important;
@font-color: #fff !important;

.ivu-form-item-label {
  font-size: 1.6rem !important;
  color: @font-color;
}
.ivu-input {
  border: 1px solid @background-color;
  background-color: @background-color;
  font-size: 14px;
  font-weight: bold;
  color: #fff !important;
}
.ivu-select-selection {
  width: 180px;
  background-color: @background-color;
  border: 1px solid @background-color;
}
.ivu-select-placeholder {
  // color: #fff !important;
  font-size: 14px !important;
  font-weight: bold;
}
.ivu-select-dropdown {
  background-color: @background-color;
  margin: 0px 0px;
}
.ivu-select-item {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: bold;
}
input::-webkit-input-placeholder {
  // color: #fff !important;
  font-size: 14px;
}
.ivu-tabs-bar {
  border-bottom: 2px solid @background-color;
}
.ivu-select-selected-value {
  color: #fff;
  font-size: 16px !important;
}
.ivu-select-item-focus {
  background-color: @background-color;
}
.ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #52c41a !important;
}
.ivu-select-item:hover {
  background-color: #1081b3 !important;
}
.ivu-date-picker-cells-cell-selected em,
.ivu-date-picker-cells-cell-selected:hover em {
  // color: #52c41a !important;
  color: #1081b2 !important;
}
.ivu-date-picker-cells-cell-range:before {
  background-color: #1081b2 !important;
  // background-color: #52c41a !important;
}
.ivu-btn {
  font-size:14px !important;
}
</style>